<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue异步请求</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <input type="button" value="get请求" @click="getUserList()">
    <input type="button" value="post请求" @click="login()">
</div>

<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            msg: "哈哈哈"
        },
        methods: {
            getUserList() {
                console.log("get请求");

                var url = "../user/getUserList/1/5";
                var data = {
                    "userName": "张",
                    "userRole": 3
                };
               this.$http.get(url,{params:data}).then(result =>{
                   console.log("请求成功");
                   console.log(result.data);
               })
                   .catch(error =>{
                   console.log("请求出错");
                   console.log(error);
               })
            },
            login() {
                console.log("post请求");

                var url = "../userLogin123";
                var data = {
                    userCode: "admin",
                    userPassword: "1234567"
                };
                this.$http.post(url,data).then(result =>{
                    console.log("请求成功");
                    console.log(result);
                })
                .catch(error =>{
                    console.log("请求出错");
                    console.log(error);
                })
            }
        }
    });
</script>
</body>
</html>